import './Step2.scss'
import { Button } from 'antd-mobile'
import { useEffect, useState } from "react"
import mapdataApi from "../Api/mapData"
import { useNavigate } from 'react-router-dom'
import { MailOpenOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
import { addReceptionList } from '../store/receptionSlice'
import { setStep, reset} from '../store/UserSlice'

function Step2() {
  const { step } = useSelector((state:any)=>state.user)
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { newReceiptionItem } = useSelector((state:any)=>state.user)
  const [serviceTabs, setTabs] = useState([])
  useEffect(() => {
    mapdataApi()
      .then((res: any) => {
        // console.log(res)
        setTabs(res.serviceTabs)
        console.log(res.serviceTabs)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])

  return (
    <>
      <main>
        <div className="serviceTabs">
          {serviceTabs?.map((it: any) => {
            return (
              <div className='tab' key={it.id}>
                <div className={it.iconClass} style={{ width: '1.2rem' }}></div>
                <div>{it.name}</div>
              </div>
            )
          }
          )}</div>
      </main>
      <footer>
        <div className='step2Btn'>
          <div>
            <MailOpenOutline />
            <span>存草稿</span>
          </div>
          <Button color='primary' onClick={() => navigate('/home')} style={{width:'40%',marginLeft:'.5rem'}} size='large'>
            上一步
          </Button>
          <Button type='button' onClick={()=>{
            dispatch(addReceptionList(newReceiptionItem))
            dispatch(reset())
            dispatch(setStep(1))
            navigate('/')
          }} style={{border:'none'}} size='large'>
            提交
          </Button>
        </div>
      </footer>
    </>
  )
}
export default Step2